<!--
 * @Description: 登录页面
 * @Author: Zhanghan
 * @Date: 2024-11-20 14:35:53
 * @LastEditTime: 2025-10-22 11:10:27
 * @LastEditors: zhangHan
-->
<template>
  <div class="login">
    <ElRow class="l_container">
      <ElCol :span="12" class="c_left">
        <div :class="`${myCleft}-title`">欢迎您的到来！</div>
        <div :class="`${myCleft}-title`">WELCOME !</div>
        <div :class="`${myCleft}-desc`">请在右侧输入账号密码，登录您的账号</div>
      </ElCol>
      <ElCol :span="12" class="c_right">
        <div :class="`${myCright}-title`">请输入信息！</div>
        <div :class="`${myCright}-form`">
          <ElForm
            ref="ruleFormRef"
            :model="formState"
            label-width="auto"
            class="demo-ruleForm"
            :size="'default'"
            :rules="rules"
            @keyup.enter="handleSubmit"
          >
            <ElFormItem prop="userName">
              <ElInput
                v-model.lazy.trim="formState.userName"
                placeholder="请输入账号"
              />
            </ElFormItem>
            <ElFormItem prop="password">
              <ElInput
                v-model.lazy.trim="formState.password"
                placeholder="请输入账号密码"
                type="password"
                show-password
              />
            </ElFormItem>
          </ElForm>
        </div>
        <div>
          <ElButton
            color="#ff493e"
            round
            size="large"
            class="sub_btn"
            @click="handleSubmit"
            >确认</ElButton
          >
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  ElRow,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
} from "element-plus";
import type { FormRules } from "element-plus";
import { userList } from "@/constant/userList";
import { generateToken, setToken, setLocal } from "@/utils/token";
import { useGo } from "@/hooks/usePages";
import { PageEnum } from "@/enums/PageEnum";
import { Local } from "@/enums/Local";
import { useUserStore } from "@/stores/modules/user";
import { useMessage } from "@/hooks/useMessage";
import { ElNotification } from "element-plus";

const message = useMessage();
const myCleft = "c_left";
const myCright = "c_right";
const ruleFormRef = ref();
const userStore = useUserStore();

const go = useGo();

//表单数据
const formState = reactive({
  userName: undefined,
  password: undefined,
});

//表单校验规则
const rules: FormRules = {
  userName: {
    required: true,
    message: "请输入账号",
    trigger: "blur",
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: "blur",
  },
};

//提交
const handleSubmit = async () => {
  await ruleFormRef.value.validate((valid: any, fields: any) => {
    if (valid) {
      console.log(formState);
      ifLogin();
    } else {
      console.log("error submit!", fields);
    }
  });
};

//表单输入完成后校验账号信息
const ifLogin = () => {
  const userName = formState.userName;
  const password = formState.password;

  let loginSuccess = false; // 登录成功标志
  let isError = false; // 错误标志

  userList.forEach((item) => {
    if (item.userName === userName && item.password === password) {
      const token = generateToken(16);
      setToken(token);
      userStore.setToken(token);
      setLocal(Local.USER_INFO, { userName, password });
      userStore.setUserInfo({ userName, password });
      loginSuccess = true; // 登录成功
      message({ type: "success", message: "登录成功,跳转中..." });
      setTimeout(() => {
        go(PageEnum.DEFAULT,true);
      }, 1000);
      setTimeout(() => {
        ElNotification.success({
          title: "登录成功",
          message: "欢迎回来" + `${userName}`,
          offset: 100,
        });
      }, 1500);
    } else {
      if (item.userName !== userName && item.password !== password) {
        isError = true; // 记录错误状态
        return;
      }
    }
  });
  // 如果登录失败，且有错误，显示错误信息
  if (loginSuccess === false && isError) {
    message({ type: "error", message: "信息错误，请重新输入" });
  }
};
</script>

<style scoped lang="less">
//less自定义类名
@my-cleft: c_left;
@my-cright: c_right;

//公共样式
@box-flex: {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
};

.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: lightgray;
  .l_container {
    width: 50%;
    height: 60%;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 设置阴影 */
    .c_left {
      background: #ff493e;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      @box-flex();
      padding: 6rem 1rem;
      .@{my-cleft}-title {
        text-align: center;
        color: white;
        font-size: 18px;
        font-weight: bold;
      }
      .@{my-cleft}-desc {
        font-size: 16px;
        text-align: center;
        color: white;
        font-weight: 300;
      }
    }
    .c_right {
      background: white;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      @box-flex();
      padding: 80px 32px;
      .@{my-cright}-title {
        text-align: center;
        color: black;
        font-size: 18px;
        font-weight: bold;
      }
      .@{my-cright}-form {
        width: 100%;
        height: auto;
      }
      .sub_btn {
        padding-left: 40px !important;
        padding-right: 40px !important;
      }
    }
  }
}
</style>
